sno2wman.dev vol.3
https://gyazo.com/7e86c531dbca35f6fa7f2de176a1b658
いいねもらえるとおれが気持ちよくなれるからしてください
code:js
easing: (_, j, len) =>
`cubicBezier(${[
0.455 + (j / (len - 1)) * (1 - 0.455),
0.03 + (j / (len - 1)) * (0 - 0.03),
0.515 + (j / (len - 1)) * (0 - 0.515),
0.955 + (j / (len - 1)) * (1 - 0.955),
].join(',')})`,
同じdurationでイージングを若干変えていくと微妙なズレが生じるので、このズレ間で色の濃淡のカバーを動かすと面白いことが出来る
これがやっていることはカバー要素3つくらいで(確か)easeInOutExpoとeaseInOutQuadでミックスする割合を変えている
なんかこれは適当に弄ってたらおもしれー挙動になったのでこれにした 本来はtranslateXは無かった(最初のアニメ)
101%にしないと(100%ではなく)残留物がサブピクセル的に残って見えて恥ずかしいからです.皆も気をつけてね
なんかこれはイージングを要素ごとに変えたらおもしろいかなと思ってやっている step(n)は離散的なイージングでカクカクしてこれはこれでおもしろい
code:js
anime.stagger(100, {easing: 'easeOutCubic'})
これどういう挙動するのか分からないが要素ごとにeaseOutCubicを考慮して100ms足すみたいな感じです,具体的には100ms, 120ms, 100msみたいな感じで足してんのかな
animejsのtimelineは使いこなすと便利で気持ちいいから皆さんもやってみてください これ後でちゃんとやってZennにでもペタペタしていいねもらって気持ちよくなろうかな!!(←多分しない) おわり